﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Demo</title>
	<link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
	<style>
		.layui-form-label {
			width: auto !important;
		}             

		.layui-input-block {
			margin-left: 110px !important;
		}

		.layui-table td, .layui-table th {
			padding: 5px 10px;
		}

		.layui-form-item {
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<form class="layui-form" action="" id="baseStoreForm">
		<div class="layui-form-item">
			<label class="layui-form-label">仓库代码</label>
			<div class="layui-input-inline">
				<input type="text" name="basecode" class="layui-input">
			</div>
			<label class="layui-form-label">仓库名称</label>
			<div class="layui-input-inline">
				<input type="text" name="basename" class="layui-input">
			</div>
			<button class="layui-btn" lay-submit lay-filter="search">查询</button>
			<button type="button" class="layui-btn layui-btn-normal" id="addBtn">新增</button>
		</div>
	</form>

	<table class="layui-hide" id="role-table"></table>

	<!-- 新增对话框 -->
	<div id="addDialog" style="display: none; padding: 15px; width: 90%; max-width: 1000px; overflow: auto;">
		<form class="layui-form" id="addForm" lay-filter="addForm">
			<table>
				<tr>
					<td>
						<div class="layui-form-item">
							<label class="layui-form-label">仓库代码</label>
							<div class="layui-input-block">
								<input type="text" name="baseCode" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
							</div>
						</div>
					</td>
					<td>
						<div class="layui-form-item">
							<label class="layui-form-label">仓库名称</label>
							<div class="layui-input-block">
								<input type="text" name="baseName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
							</div>
						</div>
					</td>
				</tr>
			</table>

			<table>
				<tr>
					<td>
						<div class="layui-form-item">
							<label class="layui-form-label">仓库料品</label>
							<div class="layui-input-block">
								<select name="warehousematerials" lay-filter="aihao">
									<option value=""></option>
									<option value="成品">成品</option>
									<option value="装配件">装配件</option>
									<option value="零部件">零部件</option>
									<option value="原材料">原材料</option>
									<option value="五金件">五金件</option>
									<option value="包装物">包装物</option>
									<option value="半成品">半成品</option>
									<option value="电容">电容</option>
								</select>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="layui-form-item">
							<label class="layui-form-label">入库类型</label>
							<div class="layui-input-block">
								<select name="storageTypes" lay-filter="aihao">
									<option value=""></option>
									<option value="采购入库">采购入库</option>
									<option value="生产入库">生产入库</option>
									<option value="委外入库">委外入库</option>
									<option value="其它入库">其它入库</option>
								</select>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="layui-form-item">
							<label class="layui-form-label">出库类型</label>
							<div class="layui-input-block">
								<select name="outboundtypes" lay-filter="aihao">
									<option value=""></option>
									<option value="销售出库">销售出库</option>
									<option value="生产出库" selected>生产出库</option>
									<option value="委外出库">委外出库</option>
									<option value="其他出库">其他出库</option>
								</select>
							</div>
						</div>
					</td>
				</tr>
			</table>
			<table>
				<tr>
					<td>
						<div class="layui-form-item">
							<label class="layui-form-label">货位</label>
							<div class="layui-input-block">
								<input type="radio" name="freight" value="true" title="启用" checked>
								<input type="radio" name="freight" value="false" title="不启用">
							</div>
						</div>
					</td>
					<td>
						<div class="layui-form-item">
							<label class="layui-form-label">到货类型</label>
							<div class="layui-input-block">
								<select name="arrivaltype" lay-filter="aihao">
									<option value=""></option>
									<option value="零部件">零部件</option>
									<option value="原材料">原材料</option>
									<option value="五金">五金</option>
								</select>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="layui-form-item">
							<label class="layui-form-label">仓库期间</label>
							<div class="layui-input-block">
								<input type="radio" name="during" value="true" title="自然月" checked>
								<input type="radio" name="during" value="false" title="固定日">
							</div>
						</div>
					</td>
					<td>
						<div class="layui-inline">
							<label class="layui-form-label">验证日期</label>
							<div class="layui-input-inline layui-input-wrap">
								<div class="layui-input-prefix">
									<i class="layui-icon layui-icon-date"></i>
								</div>
								<input type="text" name="beginDisposition" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="layui-form-item">
							<label class="layui-form-label">仓库状态</label>
							<div class="layui-input-block">
								<input type="radio" name="baseState" value="true" title="启用" checked>
								<input type="radio" name="baseState" value="false" title="停用">
							</div>
						</div>
					</td>
					<td>
						<div class="layui-form-item">
							<label class="layui-form-label">表单配置</label>
							<div class="layui-input-block">
								<input type="text" name="fromDisposition" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="layui-form-item">
							<label class="layui-form-label">仓管员</label>
							<div class="layui-input-block">
								<select name="baseKeeper" lay-filter="aihao">
									<option value=""></option>
									<option value="周莹">周莹</option>
									<option value="周桂东">周桂东</option>
									<option value="石伪善">石伪善</option>
									<option value="袁华">袁华</option>
									<option value="渤哥">渤哥</option>
								</select>
							</div>
						</div>
					</td>
					<td>
						<div class="layui-form-item">
							<label class="layui-form-label">操作员</label>
							<div class="layui-input-block">
								<select name="baseTodo" lay-filter="aihao">
									<option value=""></option>
									<option value="张三">张三</option>
									<option value="李四">李四</option>
									<option value="王五">王五</option>
									<option value="赵六">赵六</option>
									<option value="钱七">钱七</option>
								</select>
							</div>
						</div>
					</td>
				</tr>
			</table>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit lay-filter="addSubmit">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>

	<script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
	<script>
		layui.use(['table','jquery','layer','laypage','form','laydate'],function(){
			var table = layui.table;
			var $ = layui.jquery;
			var layer = layui.layer;
			var laypage = layui.laypage;
			var form = layui.form;
			var laydate = layui.laydate;

			// 初始化表格
			table.render({
				elem:'#role-table',
				id:'BaseStoretable',
				height: '500',
				cols:[[
					{field:'cid', width:80, sort: true,fixed:'left',title:'ID'},
					{field:'baseCode', width:130,title:'仓库代码'},
					{field:'baseName', width:160,title:'仓库名称'},
					{field:'warehousematerials',title:'仓库料品',width:160},
					{field:'storageTypes',title:'入库类型',width:160},
					{field:'outboundtypes',title:'出库类型',width:160},
					{field:'freight',title:'货位',width:160,templet:function(d){
						return d.freight ? '<span style="color:green">✓ 启用</span>':'<span style="color:red">✗ 不启用</span>'
					}},
					{field:'arrivaltype',title:'到货类型',width:160},
					{field:'during',width:160,title:'仓库期间',templet:function(d){
						return d.during ? '自然月':'固定日'
					}},
					{field:'beginDisposition', sort: true,title:'开始期间',width:160},
					{field:'baseState',width:160,title:'仓库状态',templet:function(d){
						return d.baseState? '启用':'禁用'
					}},
					{field:'fromDisposition',title:'表单配置',width:160},
					{field:'baseKeeper',title:'仓管员',width:160},
					{field:'baseTodo',title:'操作员',width:160},
					{fixed:'right',title:'操作',width:160,toolbar:'#operationBar'},
				]],
				page: true, // 开启分页
				limit: 15, // 默认每页显示15条
				limits:[2,15,30,50] // 可选每页显示条数
			});

			function loadRoleData(pageindex, pagesize){
				layer.load(2);
				var basecode = $('[name="basecode"]').val();
				var basename = $('[name="basename"]').val();
				var params = {
					pageindex: pageindex || 1, // 默认第一页
					pagesize: pagesize || 15,   // 默认每页15条
					basecode: basecode,
					basename: basename
				}
				$.ajax({
					//url:'http://localhost:5234/api/Managements/GetBasestore',
					url: "@ViewBag.BaseUrl/T7/Managements/GetBasestore",
					data:params,
					type:'get',
					dataType:'json',
					success:function(res){
						console.log(res.data.list);
						layer.closeAll('loading');
						if(res.code===210){
							table.reload('BaseStoretable',{
								data:res.data.list,
								count:res.data.totalCount,
								limit:pagesize||15,
								curr:pageindex||1,
							});

							//分页
							  laypage.render({
								count: res.data.totalCount, // 数据总数
								curr:pageindex,
								limit:pagesize,
								limits:[2,15,30,50],
								layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
								jump: function(obj,first){
								  if(!first) {
										loadRoleData(obj.curr, obj.limit);
								  }
								}
							  });

						}else {
							layer.msg('获取数据失败: ' + (res.message || '未知错误'), {icon: 2});
						}
					},
					error: function(xhr, status, error) {
						layer.closeAll('loading');
						layer.msg('请求失败: ' + error, {icon: 2});
						console.error('Ajax请求失败:', xhr.responseText);
					}
				});
			}

			// 页面加载完成后获取数据
			loadRoleData(1,15);

			//删除方法
			table.on('tool(BaseStoretable)', function(obj){
				var data = obj.data;
				var layEvent = obj.event;
				if(layEvent === 'del'){
					layer.confirm('确定要删除这条记录吗？', function(index){
						alert(data.cid)
						$.ajax({
							//url:'http://localhost:5090/api/BaseStoragemanage/DelBaseStore?Cid='+data.cid,
							url: "@ViewBag.BaseUrl/T8/BaseStoragemanage/DelBaseStore?Cid="+data.cid,
							type:'delete',
							data:JSON.stringify({Cid: data.cid}),
							dataType:'json',
							contentType: 'application/json',
							success:function(res){
								if(res.code == 204){
									layer.msg(res.msg || '删除成功', {icon: 1});
									obj.del();
								} else {
									layer.msg(res.msg || '删除失败', {icon: 2});
								}
							},
							error: function(xhr, status, error){
								layer.msg('请求失败: ' + error, {icon: 2});
								console.error('删除失败:', xhr.responseText);
							}
						});
						layer.close(index);
					});
				}
			});

			// 表单提交事件
			form.on('submit(search)', function () {
				loadRoleData();
				return false;
			});

			// 新增按钮点击事件
			$('#addBtn').on('click', function(){
				layer.open({
					type: 1,
					title: '新增仓库',
					area: ['90%', '90%'],
					content: $('#addDialog'),
					success: function(){
						// 重置表单
						$('#addForm')[0].reset();
						// 初始化日期选择器
						laydate.render({
							elem: '#date',
							trigger: 'click'
						});
						form.render();
					}
				});
			});

			// 新增表单提交
			form.on('submit(addSubmit)', function(data){
				var formData = data.field;
				var postData = {
					baseCode: formData.baseCode,
					baseName: formData.baseName,
					warehousematerials: formData.warehousematerials,
					storageTypes: formData.storageTypes,
					outboundtypes: formData.outboundtypes,
					freight: formData.freight === "true",
					arrivaltype: formData.arrivaltype,
					during: formData.during === "true",
					beginDisposition: formData.beginDisposition,
					baseState: formData.baseState === "true",
					fromDisposition: formData.fromDisposition,
					baseKeeper: formData.baseKeeper,
					baseTodo: formData.baseTodo
				};

				layer.load(2);
				$.ajax({
					//url: 'http://localhost:5090/api/BaseStoragemanage/AddBaseStore',
					url: "@ViewBag.BaseUrl/T8/BaseStoragemanage/AddBaseStore",
					type: 'post',
					contentType: 'application/json',
					data: JSON.stringify(postData),
					dataType: 'json',
					success: function(res){
						layer.closeAll('loading');
						if(res.code == 212){
							layer.alert(res.test, {
								title: '操作成功',
								icon: 1,
								btn: ['确定'],
								yes: function(index, layero){
									document.getElementById("addForm").reset();
									form.render();
									layer.close(index);
									layer.closeAll(); // 关闭所有弹层
									loadRoleData(); // 刷新表格数据
								}
							});
						} else {
							layer.alert(res.test, {
								title: '操作失败',
								icon: 2
							});
						}
					},
					error: function(xhr, status, error){
						layer.closeAll('loading');
						layer.alert('请求失败: ' + error, {
							title: '错误',
							icon: 2,
							btn: ['确定']
						});
						console.error('AJAX请求失败:', status, error);
						console.error('响应内容:', xhr.responseText);
					}
				});
				return false;
			});
		});
	</script>

	<!-- 操作列按钮模板 -->
	<script type="text/html" id="operationBar">
		<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
</body>
</html>